<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">

<h:head>
        <link rel="stylesheet" type="text/css" href="#{resource['css:styles.css']}" />    
</h:head>
    
    <ui:composition template="templates/content.xhtml">
        <ui:define name="content">

            <h:body>
                <h:form id="restriciton">
                    <div style="float: right;" >
                        <h:panelGroup id="search">
                            <ui:repeat value="#{searchBean.getProperties()}" var="item">


                            <div  style="border:1px solid red;">
                                <h2 id="#{item.address}"><h:outputText value="#{item.address}" /></h2>
                                <p>
                                    Price: <h:outputText value="#{item.price}" /><br/>
                                    Acres: <h:outputText value="#{item.acre}" /><br/>
                                    State: <h:outputText value="#{item.state}" /><br/>
                                    <ui:repeat value="#{item.images}" var="image">
                                        <h:graphicImage value="#{image.path}" />
                                    </ui:repeat>
                                    <script>
                                        if (#{item.isHighlight}) {
                                            document.getElementById("#{item.address}").style.color="yellow";
                                            document.getElementById("#{item.address}").style.backgroundColor="grey";
                                        }
                                    </script>
                                    <br/>                                           
                                        <h:commandButton  value="More Info" action="#{item.getResponse()}" />                                                
                                </p>
                            </div>

                            </ui:repeat>
                        </h:panelGroup>

                        <br/>
                    </div>
                    <div style="float:left">
                        Price: <h:selectOneMenu value="#{searchBean.price}">
                            <f:selectItem itemValue="0" itemLabel="$0+" />
                            <f:selectItem itemValue="1000" itemLabel="$1000+" />
                            <f:selectItem itemValue="10000" itemLabel="$10,000+" />
                            <f:selectItem itemValue="50000" itemLabel="$50,000+" />
                            <f:selectItem itemValue="100000" itemLabel="$100,000+" />
                            <f:selectItem itemValue="1000000" itemLabel="$1,000,000+" />
                            <f:ajax execute="restriciton" event="change" render="search" />
                        </h:selectOneMenu>
                        <br/>
                        <br/>
                        Acres: <h:selectOneMenu value="#{searchBean.acre}">
                            <f:selectItem itemValue="0" itemLabel="0+" />
                            <f:selectItem itemValue="1" itemLabel="1+" />
                            <f:selectItem itemValue="2" itemLabel="2+" />
                            <f:selectItem itemValue="4" itemLabel="4+" />
                            <f:selectItem itemValue="8" itemLabel="8+" />
                            <f:selectItem itemValue="10" itemLabel="10+" />
                            <f:selectItem itemValue="25" itemLabel="25+" />
                            <f:selectItem itemValue="50" itemLabel="50+" />
                            <f:selectItem itemValue="100" itemLabel="100+" />
                            <f:selectItem itemValue="250" itemLabel="250+" />
                            <f:selectItem itemValue="500" itemLabel="500+" />
                            <f:selectItem itemValue="1000" itemLabel="1000+" />
                            <f:ajax execute="restriciton" event="change" render="search" />
                        </h:selectOneMenu>
                        <br/>
                        <br/>


                    </div>

                </h:form>
            </h:body>
            
        </ui:define>
    </ui:composition>
    
</html>

